<template>
  <div class="gedantwo" >
       <div class="left" v-if="getgedandetail.length!=0">
           <div class="gedantwo_img" >
      <img :src="getgedandetail.playlist.coverImgUrl" alt="" v-if="getgedandetail">
    </div>
     <div class="gedantwolist">
           <div class="music_name">{{getgedandetail.playlist.name}}</div>
           <div class="music_name2">
             <i>标签:</i>
             <el-tag v-for="(m,index) in getgedandetail.playlist.tags" :key="index">{{m}}</el-tag>
           </div>
            <div class="music_name3">
              <button>
                <i class="iconfont icon-bofang"></i>
                <span style="line-height:27px">播放</span>
               </button>
              <button>
                  <i class="iconfont icon-shoucang"></i>
                    <span>({{subscribedCount}})</span>
                </button>
              <button>
                  <i class="iconfont icon-pinglun"></i>
                   <span>({{commentCount}})</span>
                </button>
            </div>
             <div class="music_name4">
             <i>介绍:</i>
              <span>{{getgedandetail.playlist.description}}</span>
           </div>
     </div>
     <div class="music_list">
       <i class="msc_top">歌曲列表</i>
     </div>
   <div class="bofang">
     
        <el-table
    :data='getgedandetail.playlist.tracks'
   
    border
    style="width: 100%;height:1150px">
    <el-table-column
      label='#'
      type=index
      width="40">
    </el-table-column>
     <el-table-column
      prop="name"
      label="歌曲名称"
      width="350">
    </el-table-column>
    
  
      <el-table-column
     
      label="时长"
      width="120">
   <template slot-scope="scoped">
    {{Math.ceil((scoped.row.dt/1000))|dateFormast}}
   </template>
    </el-table-column>
  
   
    <el-table-column
     
      label="歌手"
      width="160">
        <template slot-scope="scoped">
         
     <span v-for="(m,index) in scoped.row.ar" :key="index">{{m.name}}<span>{{index==scoped.row.ar.length-1?'':'/'}}</span></span>
   </template>
    </el-table-column>
    <el-table-column
      prop="al.name"
      label="专辑"
       width="240"
      >
    </el-table-column>
     <el-table-column
     
     >
       <template slot-scope="scoped">
            <i class="iconfont icon-bofang" @click="sodf(scoped.row.id)"></i>
       </template>
    </el-table-column>
  </el-table>
  <comments :type=2 :id=gedanid />
   </div>
    
       </div>
       <div class="right">
            <div class="center_box">
                     <div class="like_people">
                       <span>喜欢这个歌单的人</span>
                     </div>
                     <div class="people_img" v-if="getgedandetail.length!=0">
                            <ul>
                              <li v-for="(m,index) in getgedandetail.playlist.subscribers" :key="index">
                                <img :src="m.avatarUrl" alt="">
                              </li>
                               
                            </ul>
                     </div>
                    <div class="like_people">
                       <span>热门推荐</span>
                     </div>
                      <div class="people_imgs" v-if="getgedandetail.length!=0">
                            <ul>
                             <li v-for="(m,index) in getcatelist " :key="index">
                               <img :src="m.coverImgUrl" alt="">
                               <span>{{m.name}}</span>
                             </li>
                               
                            </ul>
                     </div>
            </div>
       </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return{
      musiclist:[]
    }
  },
  mounted(){
            this.$store.dispatch('getgedanmusic',this.gedanid)
       // console.log(this.getgedandetail);
      this.$store.dispatch('getcatelist',{m:'',mi:''})
      this.$store.dispatch('getgdcomment',this.gedanid)
  },
  computed:{
      gedanid(){
        return  JSON.parse(sessionStorage.getItem('socc'))
      },
      subscribedCount(){
          if(this.getgedandetail.playlist.subscribedCount>10000){
            return parseInt(this.getgedandetail.playlist.subscribedCount/10000)+'万'
          }else{
            return this.getgedandetail.playlist.subscribedCount
          }
      },
      commentCount(){
          if(this.getgedandetail.playlist.commentCount>10000){
            return parseInt(this.getgedandetail.playlist.commentCount/10000)+'万'
          }else{
            return this.getgedandetail.playlist.commentCount
          }
      },

       ...mapState({
         getgedandetail:(state)=>{

              return state.second.gedandetail              
         },
        getcatelist:(state)=>{
        
           
          return state.user.getcatelist
        }
       })
  },
  methods:{
    sodf(m){
     //console.log(m);
     this.$store.dispatch('getmusiclist',m)
        this.$store.dispatch('getmusic',m)
    }
  }
}
</script>

<style lang='less' scoped>
/deep/.el-table .cell{
  overflow: hidden;
   text-overflow: ellipsis;
              white-space: nowrap;
}
 .gedantwo{
      margin: 20px 135px;
      margin-right: 20px;
.left{
     float: left;
     width: 1000px;
     height: 100%;
     border-right: 1px solid #ebeef5;
         .gedantwo_img{
         float: left;
          width: 300px;
          height: 300px; 
      
             img{
               width: 250px;
               height: 250px;
             }
       }
       .gedantwolist{
         float: left;
           margin-left: 20px;
           width: 350px;
          .music_name{
          
         float: left;
         width: 350px;
         height: 50px;
        line-height: 50px;
         margin-bottom: 10px;
         font-size: 20px;
             text-overflow: ellipsis;
              white-space: nowrap;
       }
        .music_name2{
       
         float: left;
         width: 350px;
         height: 50px;
         font-size: 16px;
          margin-bottom: 10px;
          
          span{
            margin-left: 10px;
          }
           
       }
        .music_name4{
       
         float: left;
         width: 350px;
         height: 50px;
         font-size: 16px;
          margin-bottom: 10px;
          
          span{
                overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;
             
          }}
        .music_name3{
      
         float: left;
         width: 350px;
         height: 50px;
       
          margin-bottom: 10px;
          button{
            width: 80px;
            height: 30px;
            margin-right: 10px;
             text-overflow: ellipsis;
              white-space: nowrap;
              .iconfont{
                float: left;
                font-size: 16px;
                margin-bottom: 3px;
              
                margin-left: 10px;
                margin-top: 3px;
              }
              span{
                float: left;
                width: 30px;
                line-height: 23px;
                margin-left: 3px;
                font-size: 10px;
                text-align: center;
              }
          }
       }
      
 }
  .music_list{
    float: left;
          width: 1000px;
          height: 80px;
          margin-top: 0px;
           border-bottom: 3px solid blue;
              .msc_top{
                font-size: 30px;
                line-height: 100px;
              }
             
   
}
    .bofang{

  i{
    display: block;
    margin-left: 20px;
    font-size: 20px;
    color: skyblue;
    cursor: pointer;
  }
       }
}

.right{
   float: left;
   height: 800px;
   width: 300px;
     .center_box{
         height: 700px;
          width: 200px;
          margin: 20px 50px;
         
            .like_people{
              height: 30px;
              width: 200px;
              border-bottom: 1px solid #ebeef5;
                span{
                  display: inline-block;
                  font-size: 14px;
                   width: 200px;
                  line-height: 40px;
                  font-weight: bold;
                 letter-spacing: 2px;
                }
            }
            .people_img{
                width: 320px;
                height: 160px;
             
                  ul{
                    li{
                      float: left;
                      width: 60px;
                      height: 60px;
                      margin-right: 20px;
                      margin-top: 20px;
                      background-color: gray;
                        img{
                           width: 60px;
                      height: 60px;
                        }
                    }
                  }
            }
            .people_imgs{
               li{
                 width: 320px;
                 height: 120px;
                   img{
                      float: left;
                     width:100px ;
                     height: 100px;
                   }
                   span{
                    float: left;
                    font-size: 16px;
                    line-height: 20px;
                      width: 220px;
                      height: 20px;
                       text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
                   }
               }
            }
     }
    
}
       }
       
</style>